<template xmlns:el-col="http://www.w3.org/1999/xhtml">
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i> banner图管理
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <span style="font-size: 14px;font-family: Consolas">&nbsp;名称：</span>
                <el-input style="width: 150px" v-model="pagination.queryString" placeholder="名称" class="handle-input mr10"></el-input>



                    <span style="padding-left: 10px"><el-button type="primary" icon="el-icon-search" @click="findPage()">搜索</el-button></span>
                     <span style="padding-left: 10px"><el-button icon="el-icon-plus" type="primary" class="butT" @click="handleCreate()">新增banner图</el-button></span>
                    <span style="padding-left: 10px"><el-button icon="el-icon-delete" size="small" type="danger" :disabled="multipleSelection.length === 0" @click="deleteArr">批量删除</el-button></span>














            </div>
            <el-table
                    :data="dataList1"
                    border
                    class="table"
                    ref="multipleTable"
                    header-cell-class-name="table-header"
                    @selection-change="handleSelectionChange"
            >
                <el-table-column type="selection" width="50" align="center"></el-table-column>
                <el-table-column prop="goods_name" label="名称" align="center"></el-table-column>
                <el-table-column prop="spec_type" label="跳转类型" align="center" ></el-table-column>
                <el-table-column prop="sales_initial" label="排序" align="center" ></el-table-column>
                <el-table-column prop="sales_actual" label="跳转地址" align="center" ></el-table-column>
                <el-table-column prop="delivery_id" label="添加时间" align="center" ></el-table-column>
                <el-table-column prop="delivery_id" label="所属模块" align="center" ></el-table-column>
                <el-table-column prop="man" label="操作员" align="center" ></el-table-column>

                <el-table-column label="操作" width="180" align="center">
                    <template slot-scope="scope">
                        <el-button
                                type="text"
                                icon="el-icon-edit"
                                @click="handleEdit(scope.row)"
                        >编辑</el-button>
                        <el-button
                                type="text"
                                icon="el-icon-delete"
                                class="red"
                                @click="deleteOne(scope.row)"
                        >删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--<div class="pagination">
                <el-pagination
                        background
                        layout="total, prev, pager, next"
                        :current-page="query.pageIndex"
                        :page-size="query.pageSize"
                        :total="pageTotal"
                        @current-change="handlePageChange"
                ></el-pagination>
            </div>-->

            <div class="pagination-container" style="padding-top: 20px">
                <el-pagination
                        class="pagiantion"
                        background
                        @current-change="handleCurrentChange"
                        :current-page="pagination.pageIndex"
                        :page-size="pagination.pageSize"
                        layout="total, prev, pager, next, jumper"
                        :total="pagination.total">
                </el-pagination>
            </div>
        </div>


        <!-- 编辑标签弹层 -->
        <div class="add-form">
            <el-dialog title="编辑产品" :visible.sync="dialogFormVisible4Edit">
                <el-form ref="dataEditForm" :model="formData" label-position="right" label-width="100px">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="产品名称" prop="goods_name">
                                <el-input v-model="formData.goods_name"/>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="规格" prop="spec_type">
                                <el-input v-model="formData.spec_type"/>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="普通用户单价" prop="first_money">
                                <el-input v-model="formData.first_money"/>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="退役军人单价" prop="second_money">
                                <el-input v-model="formData.second_money"/>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="起批量" prop="deduct_stock_type">
                                <el-input v-model="formData.deduct_stock_type"/>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="状态" prop="goods_status">
                                <el-input v-model="formData.goods_status"/>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="交易方式" prop="is_ind_dealer">
                                <el-input v-model="formData.is_ind_dealer"/>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="操作员" prop="pusername">
                                <el-input v-model="formData.pusername"/>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible4Edit = false">取消</el-button>
                    <el-button type="primary" @click="handleEdit()">确定</el-button>
                </div>
            </el-dialog>
        </div>


    </div>
</template>

<script>
    import { fetchData } from '../../../api/index';
    export default {
        name: 'basetable',
        data() {
            return {
                query: {
                    address: '',
                    name: '',
                    pageIndex: 1,
                    pageSize: 10
                },
                formData:{},
                dataList:[],
                tableData: [],
                multipleSelection: [],
                delList: [],
                editVisible: false,
                dialogFormVisible4Edit: false,//编辑表单是否可见
                pageTotal: 0,
                form: {},
                idx: -1,
                id: -1,
                pagination: {//分页相关模型数据
                    pageIndex: 1,//当前页码
                    pageSize: 5,//每页显示的记录数
                    total: 0,//总记录数
                    status:null,
                    queryString:null
                },
                options: [{
                    value: 'all',
                    label: '全部'
                }, {
                    value: '已启用',
                    label: '已启用'
                }, {
                    value: '已禁用',
                    label: '已禁用'
                }],
            };
        },
        created() {
            this.findPage();
        },
        methods: {
            //多选操作
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },

            //批量删除
            deleteArr(){
                this.$confirm("你确定要删除当前数据吗？", "提示", {//确认框
                    type:'warning'
                }).then(()=>{
                    this.multipleSelection.forEach(selectedItem=>{
                        this.axios.delete("http://localhost:12005/product/deleteProductById?goods_id="+selectedItem.goods_id).then((res) => {
                            if (res.data.isFlag) {
                                this.$message({
                                    type: 'success',
                                    message: res.data.message
                                });
                                //重新进行分页查询
                                this.findPage();
                            }else{
                                //执行失败
                                this.$message.error(res.data.message);
                            }
                        })
                    })
                }).catch(()=>{
                    this.$message({
                        type: 'info',
                        message: '操作已取消'
                    });
                })
            },


            deleteOne(row){
                this.$confirm("你确定要删除当前数据吗？", "提示", {//确认框
                    type:'warning'
                }).then(()=>{
                    this.axios.delete("http://localhost:12005/product/deleteProductById?goods_id="+row.goods_id).then((res) => {
                        if (res.data.isFlag) {
                            this.$message({
                                type: 'success',
                                message: res.data.message
                            });
                            //重新进行分页查询
                            this.findPage();
                        }else{
                            //执行失败
                            this.$message.error(res.data.message);
                        }
                    })
                }).catch(()=>{
                    this.$message({
                        type: 'info',
                        message: '操作已取消'
                    });
                })
            },

            //根据条件查询并分页
            findPage(){
                var param = {
                    pageIndex: this.pagination.pageIndex,
                    pageSize: this.pagination.pageSize,
                    status:this.pagination.status,
                    queryString: this.pagination.queryString
                };
                this.axios.get("http://localhost:12005/product/findByPage?pageIndex=" + param.pageIndex + "&pageSize=" + param.pageSize + "&goods_status="+param.status+"&queryString="+param.queryString).then((res) => {
                    this.pagination.total = res.data.data.totalData;
                    this.dataList = res.data.data.data;
                })
            },



            handleCurrentChange(pageIndex) {
                //设置最新的页码
                this.pagination.pageIndex = pageIndex;
                //重新调用findPage方法进行分页查询
                this.findPage();
            },

            // 弹出编辑窗口
            handleEdit(row) {
                //弹出编辑窗口
                this.dialogFormVisible4Edit = true;
                //回显数据，发送ajax请求根据ID查询当前检查项数据
                this.axios.get("http://localhost:12005/product/getProductById?goods_id=" + row.goods_id).then(res => {
                    if (res.data.isFlag) {

                        //进行回显，基于VUE的数据绑定实现
                        this.formData = res.data.data;
                    }
                    else {
                        //查询失败，弹出提示
                        this.$message.error(res.data.message);
                    }
                })
            },






























            // 获取 easy-mock 的模拟数据
            getData() {
                fetchData(this.query).then(res => {
                    console.log(res);
                    this.tableData = res.list;
                    this.pageTotal = res.pageTotal || 50;
                });
            },
            // 触发搜索按钮
            handleSearch() {
                this.$set(this.query, 'pageIndex', 1);
                this.getData();
            },
            // 删除操作
            handleDelete(index, row) {
                // 二次确认删除
                this.$confirm('确定要删除吗？', '提示', {
                    type: 'warning'
                })
                    .then(() => {
                        this.$message.success('删除成功');
                        this.tableData.splice(index, 1);
                    })
                    .catch(() => {});
            },

            delAllSelection() {
                const length = this.multipleSelection.length;
                let str = '';
                this.delList = this.delList.concat(this.multipleSelection);
                for (let i = 0; i < length; i++) {
                    str += this.multipleSelection[i].name + ' ';
                }
                this.$message.error(`删除了${str}`);
                this.multipleSelection = [];
            },
            // 保存编辑
            saveEdit() {
                this.editVisible = false;
                this.$message.success(`修改第 ${this.idx + 1} 行成功`);
                this.$set(this.tableData, this.idx, this.form);
            },
            // 分页导航
            handlePageChange(val) {
                this.$set(this.query, 'pageIndex', val);
                this.getData();
            }
        }
    };
</script>

<style scoped>
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-select {
        width: 120px;
    }

    .handle-input {
        width: 300px;
        display: inline-block;
    }
    .table {
        width: 100%;
        font-size: 14px;
    }
    .red {
        color: #ff0000;
    }
    .mr10 {
        margin-right: 10px;
    }
    .table-td-thumb {
        display: block;
        margin: auto;
        width: 40px;
        height: 40px;
    }
</style>
